<!-- 护理项目列表页 -->
<template>
    <div class="min-h serveProject bg-wt">

      <!-- 顶部搜索栏子组件 -->
      <SearchForm
      @handle-reset="handleReset"
      @handle-search="handleSearch"
      @handle-clear="handleClear"
      :search-data="pagination"
      />

      <!-- 使用数据列表子组件 -->
      <TableList 
      @handle-disable="handleDisableDialog"
      @handle-delete="handleDeleteDialog"
      @handle-edit="handleEdit"
      @handle-bulid="handleBulid"
      @give-pagination="changePage"
      :tableData="tableData" 
      :total="total" 
      :pagination="pagination" />

      <!-- 弹窗子组件 -->
       <DialogForm
       ref="formRef"
       :title="title"
       :visible="visible"
       :data="formBaseData"
       @handleClose="handleClose"
       @handle-add="handleAdd"
       @handle-edit="editNursingProject"
       />

       <!-- 删除弹窗子组件 -->
        <DeleteDialog
        @handle-delete="handleDelete"
        @handle-close="handleDeleteDialogClose"
        :visible="deleteDialogvisible"
        />

        <!-- 禁用弹框子组件 -->
         <DisableDialog
         @handle-click="handleDisable"
         @handle-close="handleDisableDialogClose"
         :visible="disableDialogvisible"
         />
    </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getProjectDetails, getProjectList, projectAdd, projectDelete, projectStatus, projectUpdate } from '@/api/serve';
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import DeleteDialog from '@/components/OperateDialog/index.vue'
import DisableDialog from '@/components/OperateDialog/disable.vue'
import { MessagePlugin } from 'tdesign-vue-next';

const formRef = ref(null);

const formBaseData = ref({});
/* 弹窗标题 */
const title = ref('新增');

// 新增/编辑弹窗显示隐藏
const visible = ref(false);

// 删除弹窗显示隐藏
const deleteDialogvisible = ref(false);

// 禁用弹窗显示隐藏
const disableDialogvisible = ref(false);

//分页搜索对象
const pagination = ref({
  pageSize: 5,
  pageNum: 1
})
/* 表格列表数据 */
const tableData = ref([]);
/* 总记录数 */
const total = ref(0);

/* 项目id */
const projectId = ref(null);
/* 项目对象 */
const project = ref(null);


/* ======================方法定义=================================== */
/* 子传父：分页查询护理项数据 */
const changePage = (val)=>{
  console.log("===>"+JSON.stringify(val));
  pagination.value.pageSize = val.pageSize;
  pagination.value.pageNum = val.current;
  pageQuery();
}

/* 分页查询护理项 */
const pageQuery = async () => {
  const result = await getProjectList(pagination.value);
  if (result.code === 200) {
    tableData.value = result.data.records;
    total.value = result.data.total;
  }
}
onMounted(() => {
  pageQuery()
})

const handleClear = (val) => {
  console.log(val);
  if(val === 'name'){
    delete pagination.value.name;
  }else if(val === 'status'){
    delete pagination.value.status;
  }
  pageQuery();
}

const handleSearch = () => {
  console.log(pagination.value);
  pageQuery();
}

const handleReset = () => {
  //删除pagination对象中的name属性
  delete pagination.value.name;
  //删除pagination对象中的status属性
  delete pagination.value.status;
  pageQuery();
}

// 点击新增按钮,打开弹窗
const handleBulid = (val) => {
  debugger;
  visible.value = true;
}
// 关闭弹窗,重置visible.value
const handleClose = () => {
  debugger;
  visible.value = false;
}

/* 新增项目 */
const handleAdd = async (val) => {
  debugger;
  const res = await projectAdd(val);
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    pageQuery()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

//打开删除弹框
const handleDeleteDialog = (id) => {
  debugger;
  projectId.value = id;
  deleteDialogvisible.value = true;
}
// 关闭删除弹框
const handleDeleteDialogClose = () => {
  debugger;
  deleteDialogvisible.value = false;
}
/* 删除项目 */
const handleDelete = async () => {
  debugger;
  const res = await projectDelete(projectId.value);
  if (res.code === 200) {
    MessagePlugin.success('删除成功')
    pageQuery()
    handleDeleteDialogClose()
  } else {
    MessagePlugin.error(res.msg)
  }
}

/* 打开禁用弹框 */
const handleDisableDialog = (val) => {
  debugger;
  project.value = val;
  disableDialogvisible.value = true;
}
/* 关闭禁用弹框 */
const handleDisableDialogClose = () => {
  debugger;
  disableDialogvisible.value = false;
}

/* 禁用项目 */
const handleDisable = async () => {
  debugger;
  const res = await projectStatus(project.value);
  if (res.code === 200) {
    MessagePlugin.success('禁用成功')
    pageQuery()
    handleDisableDialogClose()
  } else {
    MessagePlugin.error(res.msg)
  }
}



/* 打开编辑弹框 */
const handleEdit = (val) => {
  debugger;
  title.value = '编辑';
  //查询数据
  getDetail(val.id);
  //将val对象拷贝一份给formBaseData.value
  // formBaseData.value = {...val}
  // formBaseData.value = val
  visible.value = true;
}
/* 根据id查询项目详情 */
const getDetail = async (id)=>{
  const result = await getProjectDetails(id);
  if (result.code === 200) {
    formBaseData.value = result.data
  }
}


/* 编辑项目 */
const editNursingProject = async (val) => {
  debugger;
  const res = await projectUpdate(val);
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    pageQuery()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
</script>
